import React from 'react';
import {Link} from 'react-router';
import {getItem, setItem} from '../../utils';
import config from '../../config';
/**
 * 加载公共组件
 * */
import MainSection from '../../components/MainSection/MainSection';

/**
 * 加载样式或图片文件
 * */
import './sass/famMan.scss';
import iconAdd from '../_common_img/my-icon/add-fam.png';
import iconEdit from '../_common_img/my-icon/fam-edit.png';
import iconDel from '../../containers/_common_img/my-icon/delet-icon.png';

class FamMan extends React.Component {
    static contextTypes = {
        router: React.PropTypes.object.isRequired
    };

    constructor(props) {
        super(props);
        this.handleFinishChoose = this.handleFinishChoose.bind(this);
        this.handleChooseMember = this.handleChooseMember.bind(this);
        this.isChecked = this.isChecked.bind(this);
        this.renderFamList = this.renderFamList.bind(this);
        this.state = {
            chooseFlag: false,
            famList: [],
            curMember: [],
            curChild: [],
            curAdult: []
        };
    }

    componentDidMount() {
        const {location, actions} = this.props;
        const newState = location.state;
        console.log(newState);
        if (!!newState) {
            this.setState({
                chooseFlag: newState.chooseFlag,
                curMember: newState.curMember,
                curChild: newState.curChild,
                curAdult: newState.curAdult
            });
        }
        actions.fetchFamList().then(res=> {
            // console.log(res)
            if (res.data.code === 20000) {
                this.setState({
                    famList: res.data.data.array
                })
            } else {
                alert(res.data.message)
            }
        });
    }

    handleDelMember(id, type, index) {
        const {actions} = this.props;
        if (confirm("确认删除成员?")) {
            actions.delFamMember(id).then(res=> {
                if (res.data.code === 20000) {
                    // let newFamList = this.state.famList;
                    // newFamList.splice(index, 1);
                    // this.setState({
                    //     famList: newFamList
                    // });
                    // this.handleChooseMember(id, type);
                    console.log("删除成功");
                }
            })
        }
    }

    handleEditMember(member) {
        this.context.router.push({
            pathname: "/userCenter/famInfo?type=" + ([101,102].indexOf(member.relation) > -1 ? 1 : 2),
            state: {
                id: member.id,
                name: member.name,
                gender: member.sex,
                birthday: member.birthday,
                role: member.relation,
                phone: member.phone
            }
        });
    }


    handleChooseMember(id, type) {
        Array.prototype.remove = function (val) {
            let index = this.indexOf(val);
            if (index > -1) {
                this.splice(index, 1);
            }
        };

        let childArr = [101, 102];
        let curMember = this.state.curMember;
        let curChild = this.state.curChild;
        let curAdult = this.state.curAdult;
        if (this.isChecked(id)) {
            curMember.remove(id);
            childArr.indexOf(type) > -1 ? curChild.remove(id) : curAdult.remove(id);
        } else {
            curMember.push(id);
            childArr.indexOf(type) > -1 ? curChild.push(id) : curAdult.push(id);
        }
        this.setState({
            curMember: curMember,
            curChild: curChild,
            curAdult: curAdult
        })

    }

    isChecked(id) {
        return this.state.curMember.indexOf(id) > -1;
    }

    handleFinishChoose() {
        const {location} = this.props;
        this.context.router.push({
            pathname: location.state.backUrl,
            state: {
                curMember: this.state.curMember,
                curChild: this.state.curChild,
                curAdult: this.state.curAdult
            }
        })
    }

    renderFamList(type) {
        const {user} = this.props;
        var list = [];
        if (type === 'child') {
            list = user.famList.filter((item)=>[101, 102].indexOf(item.relation) > -1);
        } else if (type == 'adult') {
            list = user.famList.filter((item)=>[100, 103, 104, 105, 106, 107, 108].indexOf(item.relation) > -1);
        }
        return (
            <ul className="fam-list">
                {
                    list.length > 0 ? list.map((item, index)=>
                        <li key={index}>
                            {
                                this.state.chooseFlag ? (
                                    <div className="choose-wrap"
                                         onClick={this.handleChooseMember.bind(this,item.id,item.relation)}>
                                        <i className={this.isChecked(item.id) ? "checked" : ""}/>
                                        <span>{item.name}</span>
                                        <em>{config.FAM_MEMBER[item.relation]}</em>
                                    </div>
                                ) : (
                                    <div className="choose-wrap">
                                        <span>{item.name}</span>
                                        <em>{config.FAM_MEMBER[item.relation]}</em>
                                    </div>
                                )
                            }
                            <img onClick={this.handleDelMember.bind(this,item.id,item.relation,index)}
                                 src={iconDel} alt=""/>
                            <img onClick={this.handleEditMember.bind(this,item)}
                                 src={iconEdit} alt=""/>
                        </li>
                    ) : <li className="color-9">暂时没有成员信息</li>
                }
            </ul>
        )

    }

    render() {
        const {user} = this.props;
        return (
            <MainSection className="fam-man" title="家庭成员">
                <div className="fam-head">
                    <i/>
                    <span>儿童</span>
                    <Link to="/userCenter/famInfo?type=1">
                        <img src={iconAdd} alt=""/> 添加儿童
                    </Link>
                </div>
                {
                    this.renderFamList('child')
                }
                <div className="fam-head">
                    <i/>
                    <span>家长</span>
                    <Link to="/userCenter/famInfo?type=2">
                        <img src={iconAdd} alt=""/> 添加家长
                    </Link>
                </div>
                {
                    this.renderFamList('adult')
                }
                <p className="tip"><i>!</i>参加活动至少需要一位成人和一位儿童哦~</p>

                {
                    this.state.chooseFlag ? <div className="control-bar" onClick={this.handleFinishChoose}>下一步</div> : null
                }

            </MainSection>
        );
    }
}

export default FamMan;